<template>
	<div class="info-box">
		<el-row :gutter="45">
			<el-col :span="16">
				<el-descriptions :column="2" title="基本设置" direction="vertical">
					<el-descriptions-item label="联系方式" label-class-name="text-label" class-name="text-value">
						<span class="mr8">{{ userInfo.phone }}</span>
						<el-button type="danger" size="small" plain @click="handleOperate('updatePhone', '修改手机号')">修改</el-button>
					</el-descriptions-item>
					<el-descriptions-item label="姓名" label-class-name="text-label" class-name="text-value">
						<el-input v-model="userInfo.realName" @change="updateUserInfo"></el-input>
					</el-descriptions-item>
					<el-descriptions-item label="用户编号" label-class-name="text-label" class-name="text-value">{{ userInfo.userId }}</el-descriptions-item>
					<el-descriptions-item label="用户名" label-class-name="text-label" class-name="text-value">{{ userInfo.username }}</el-descriptions-item>
					<el-descriptions-item label="用户密码" label-class-name="text-label" class-name="text-value">
						<span class="mr8">********</span>
						<el-button type="danger" size="small" plain @click="handleOperate('updatePass', '修改密码')">修改</el-button>
					</el-descriptions-item>
					<el-descriptions-item label="所属行政单位" label-class-name="text-label" class-name="text-value">
						{{ userInfo.organizationName }}
					</el-descriptions-item>
					<el-descriptions-item label="角色" label-class-name="text-label" class-name="text-value">
						<el-tag type="danger" v-if="userInfo.roleName">{{ userInfo.roleName }}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="数据对接鉴权key" label-class-name="text-label" class-name="text-value"></el-descriptions-item>
				</el-descriptions>
			</el-col>
			<el-col :span="8">
				<AplidUpload :showFileList="false" :limit="1" :multiple="false" v-model="userInfo.avatar" uploadTip="用户照片" @change="updateUserInfo"></AplidUpload>
			</el-col>
		</el-row>

		<el-dialog v-model="visible" :title="dialogTitle" width="35%">
			<updatePass v-if="whichCommon == 'updatePass'" @refresh="handleRefresh"></updatePass>
			<updatePhone v-if="whichCommon == 'updatePhone'" @refresh="handleRefresh"></updatePhone>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import updatePass from './updatePass/index.vue'
import updatePhone from './updatePhone/index.vue'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import {xxtea_decrypt, xxtea_encrypt} from '@/utils/xxtea'
const { userLoginOut } = useUserStore()
const visible = ref(false)
const dialogTitle = ref('操作')
const whichCommon = ref('updatePass')
const userInfo = ref({} as any)
const getInitData = () => {
	apiMod.sys_user_value().then((res) => {
		console.log('=0=',res)
		userInfo.value = res.data.sysUser
		userInfo.value.phone = xxtea_decrypt(userInfo.value.phone)
		userInfo.value.username = xxtea_decrypt(userInfo.value.username)
		// userInfo.value.realName = xxtea_decrypt(userInfo.value.realName)
	})
}

const updateUserInfo = () => {
	console.log('-=-',userInfo.value)
	apiMod
		.sys_user_edit_user({
			userId: userInfo.value.userId,
			avatar: userInfo.value.avatar,
			username: userInfo.value.username,
	    	realName: userInfo.value.realName,
		})
		.then(() => {
			ElMessage.success('更新成功')
			getInitData()
		})
}

const handleRefresh = () => {
	visible.value = false
	ElMessageBox.alert('当前修改成功，请重新登录', '提示', {
		confirmButtonText: '去登录',
		callback: () => {
			apiMod.userLogout().then(() => {
				ElMessage({
					type: 'success',
					message: '退出成功',
				})
				userLoginOut()
				setTimeout(() => {
					window.location.reload()
				}, 1000)
			})
		},
	})
}

const handleOperate = (type, title) => {
	visible.value = true
	dialogTitle.value = title
	whichCommon.value = type
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.info-box {
	padding: 10px;
	margin-top: 10px;
}

:deep(.text-label) {
	font-family: 'Microsoft YaHei';
	font-weight: 400;
	font-size: 1rem;
	text-align: left;
	color: rgba(0, 0, 0, 0.5);
}

:deep(.text-value) {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 1rem;
	text-align: left;
	color: #000000e6;
}
</style>
